<template>
  <div class="laber">
    <h2>油化蜡设备</h2>
    <div class="app-container1">
      <div class="app-container-left">
        <h1 style="margin: 25px 0 0; display: inline-block">设备温度信息</h1>
        <div class="optionL">
          <el-form
            :model="optionL"
            ref="optionL"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item
              class="f1"
              label="进油口预设温度(℃)"
              prop="optionJ"
              :rules="[
                { required: true, message: '请输入整数或保留一位小数' }
              ]"
            >
              <el-input
                style="width: 70px"
                v-model="optionL.optionJ"
                autocomplete="off"
                size="mini"
                oninput="if(value< 0)value=0;if(value> 160)value=160;if(isNaN(value)){value=''};if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
              ></el-input>
              <el-button style="margin: 0 10px 0 10px;" type="primary" size="mini" @click="submitFormT('optionL')"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
          <el-form
            :model="optionP"
            ref="optionP"
            label-width="150px"
            class="demo-ruleForm"
          >
            <el-form-item
              class="f2"
              label="出油口预设温度(℃)"
              prop="optionC"
              :rules="[
                { required: true, message: '请输入整数或保留一位小数' }
              ]"
            >
              <el-input
                style="width: 70px"
                v-model="optionP.optionC"
                autocomplete="off"
                size="mini"
                oninput="if(value< 0)value=0;if(value> 160)value=160;if(isNaN(value)){value=''};if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"
              ></el-input>
              <el-button style="margin:0 8px 0 10px;" type="primary" size="mini" @click="submitForm('optionP')"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <el-table
          v-loading="loading"
          :data="postList"
          border
          :row-style="{ height: '40.5px' }"
          :model="queryParams"
          :cell-style="color1"
          :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
        >
          <el-table-column label="运行状态" align="center" prop="state" />
          <el-table-column label="设备编号" align="center" prop="deviceNo" />
          <el-table-column label="实际温度(℃)" align="center" prop="actualT" />
          <el-table-column label="报警上限(℃)" align="center" prop="setTH" />
          <el-table-column label="报警下限(℃)" align="center" prop="setTL" />
          <el-table-column
            label="原始设定上限(℃)"
            align="center"
            prop="setTO"
          />
        </el-table>
      </div>
      <div class="app-container-right">
        <div class="down2">
          <h1>设备能耗信息</h1>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            :fit="fit"
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column
              label="当前功耗(W)"
              align="center"
              prop="deviceConsumptionNow"
            />
            <el-table-column
              label="总能耗(KWH)"
              align="center"
              prop="deviceConsumptionAll"
            />
            <el-table-column
              label="功耗报警上限(W)"
              align="center"
              prop="deviceConsumptionSet"
            />
          </el-table>
        </div>
        <div class="down3">
          <h1>设备电流信息</h1>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column label="A项电流(A)" align="center" prop="ia" />
            <el-table-column label="B项电流(A)" align="center" prop="ib" />
            <el-table-column label="C项电流(A)" align="center" prop="ic" />
          </el-table>
        </div>
        <div class="down4">
          <h1>设备电压信息</h1>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column label="A项电压(V)" align="center" prop="ua" />
            <el-table-column label="B项电压(V)" align="center" prop="ub" />
            <el-table-column label="C项电压(V)" align="center" prop="uc" />
          </el-table>
        </div>
      </div>
    </div>
    <div class="chart">
      <div class="down5">
        <el-date-picker
          clearable
          v-model="myTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择测试时间"
        >
        </el-date-picker>
        <el-button style="margin-left: 20px" type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索
        </el-button>
      </div>
      <div class="clear"></div>
      <div class="echarts">
        <div class="proCharts" ref="echarts"></div>
        <div class="proCharts" ref="echart"></div>
        <div class="proCharts" ref="echar"></div>
        <div class="proCharts" ref="echa"></div>
        <div class="proCharts" ref="ech"></div>
        <div class="proCharts" ref="ec"></div>
        <div class="proCharts" ref="e"></div>
        <div class="proCharts" ref="srTemp"></div>
        <div class="proCharts" ref="djTemp"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  oilNow,
  consNow,
  oilline,
  srTempAPI,
  djTempAPI,
  oillinetow,
  oillinethree,
  oillinefour,
  oillinefive,
  oillinesix,
  oillineseven,
  oilIn, //进油口
  oilOn, //出油口
} from "@/api/system/from.js";
export default {
  data() {
    return {
      optionL: {
        optionJ: 100,
      },
      optionP: {
        optionC: 90,
      },
      fit: true,
      loading: false,
      postList: [],
      queryParams: {
        state: null,
        deviceNo: null,
        actualT: null,
        setTH: null,
        setTL: null,
        setTO: null,
      },
      oilList: [], //油化蜡列表
      myTime: "",
      tableData: [
        {
          deviceNo: null,
          deviceConsumptionNow: null,
          deviceConsumptionAll: null,
          deviceConsumptionSet: null,
          ia: null,
          ib: null,
          ic: null,
          ua: null,
          ub: null,
          uc: null,
        },
      ],
    };
  },
  mounted() {
    this.getList();
    this.getTypeList();
    this.getOilList();
    this.getsrTemp();
    this.getdjTempFN();
    this.getOilListTwo();
    this.getOilListthree();
    this.getOilListfour();
    this.getOilListfive();
    this.getOilListsix();
    this.getOilListseven();
  },
  methods: {
    // 出油口提交
    submitForm() {
      this.$confirm('是否提交温度?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        oilOn(this.optionP.optionC).then(res => {
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
        })  
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '提交失败'
        });          
      });
    },
    // 进油口提交
    submitFormT() {
      this.$confirm('是否提交温度?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        oilIn(this.optionL.optionJ).then(res => {
          console.log(res)
          this.$message({          
            type: 'success',
            message: '提交成功!'
          });
        })  
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '提交失败'
        });          
      });
    },
    proving(e){
      var val=e.target.value;
      //限制只能输入一个小数点
      if (val.indexOf(".") != -1) {
          var str = val.substr(val.indexOf(".") + 1);
          if (str.indexOf(".") != -1) {
              val = val.substr(0, val.indexOf(".") + str.indexOf(".") + 1);
          }
      }
      e.target.value = val.replace(/[^\d^\.]+/g,'');
    },
    color1({ row, column, rowIndex, columnIndex }) {
      if (row.state === "正常") {
        return;
      } else if (row.state === "温度过低") {
        return "background-color:#87CEFA;color:#fff";
      } else if (row.state === "温度过高") {
        return "background-color:#ff6666;color:#fff";
      }
    },
    /** 表格  温度*/
    getList() {
      this.loading = true;
      oilNow().then((response) => {
        // console.log(response)
        this.postList = response.data;
        this.loading = false;
        this.optionL.optionJ=response.data[5].setTO;
        this.optionP.optionC=response.data[6].setTO;
        // console.log(this.optionP.optionC)
      });
    },
    // 一号蜡池
    getOilList() {
      this.loading = true;
      oilline(this.myTime).then((res) => {
        this.oilList = res.data;
        // 1
        const option = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["一号蜡池(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "一号蜡池(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E1 = echarts.init(this.$refs.echarts);
        E1.setOption(option);
        window.addEventListener("resize", function () {
          E1.resize();
        });
        // 2
        // const option2 = {
        //   xAxis: {
        //     data: this.oilList[1][1],
        //   },
        //   yAxis: {
        //     type: "value",
        //   },
        //   legend: {
        //     data: ["二号蜡池(℃)"],
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //     axisPointer: {
        //       type: "cross",
        //       label: {
        //         backgroundColor: "#6a7985",
        //       },
        //     },
        //   },
        //   series: [
        //     {
        //       name: "二号蜡池(℃)",
        //       data: this.oilList[1][0],
        //       type: "line",
        //       markPoint: {
        //         data: [
        //           { type: "max", name: "Max" },
        //           { type: "min", name: "Min" },
        //         ],
        //       },
        //       markLine: {
        //         data: [{ type: "average", name: "Avg" }],
        //       },
        //     },
        //   ],
        // };
        // const E2 = echarts.init(this.$refs.echart);
        // E2.setOption(option2);
        // window.addEventListener("resize", function () {
        //   E2.resize();
        // });
        //3
        // const option3 = {
        //   xAxis: {
        //     data: this.oilList[2][1],
        //   },
        //   yAxis: {
        //     type: "value",
        //   },
        //   legend: {
        //     data: ["三号蜡池(℃)"],
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //     axisPointer: {
        //       type: "cross",
        //       label: {
        //         backgroundColor: "#6a7985",
        //       },
        //     },
        //   },
        //   series: [
        //     {
        //       name: "三号蜡池(℃)",
        //       data: this.oilList[2][0],
        //       type: "line",
        //       markPoint: {
        //         data: [
        //           { type: "max", name: "Max" },
        //           { type: "min", name: "Min" },
        //         ],
        //       },
        //       markLine: {
        //         data: [{ type: "average", name: "Avg" }],
        //       },
        //     },
        //   ],
        // };
        // const E3 = echarts.init(this.$refs.echar);
        // E3.setOption(option3);
        // window.addEventListener("resize", function () {
        //   E3.resize();
        // });
        // 4
        // const option4 = {
        //   xAxis: {
        //     data: this.oilList[3][1],
        //   },
        //   yAxis: {
        //     type: "value",
        //   },
        //   legend: {
        //     data: ["四号蜡池(℃)"],
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //     axisPointer: {
        //       type: "cross",
        //       label: {
        //         backgroundColor: "#6a7985",
        //       },
        //     },
        //   },
        //   series: [
        //     {
        //       name: "四号蜡池(℃)",
        //       data: this.oilList[3][0],
        //       type: "line",
        //       markPoint: {
        //         data: [
        //           { type: "max", name: "Max" },
        //           { type: "min", name: "Min" },
        //         ],
        //       },
        //       markLine: {
        //         data: [{ type: "average", name: "Avg" }],
        //       },
        //     },
        //   ],
        // };
        // const E4 = echarts.init(this.$refs.echa);
        // E4.setOption(option4);
        // window.addEventListener("resize", function () {
        //   E4.resize();
        // });
        // 5
        // const option5 = {
        //   xAxis: {
        //     data: this.oilList[4][1],
        //   },
        //   yAxis: {
        //     type: "value",
        //   },
        //   legend: {
        //     data: ["五号蜡池(℃)"],
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //     axisPointer: {
        //       type: "cross",
        //       label: {
        //         backgroundColor: "#6a7985",
        //       },
        //     },
        //   },
        //   series: [
        //     {
        //       name: "五号蜡池(℃)",
        //       data: this.oilList[4][0],
        //       type: "line",
        //       markPoint: {
        //         data: [
        //           { type: "max", name: "Max" },
        //           { type: "min", name: "Min" },
        //         ],
        //       },
        //       markLine: {
        //         data: [{ type: "average", name: "Avg" }],
        //       },
        //     },
        //   ],
        // };
        // const E5 = echarts.init(this.$refs.ech);
        // E5.setOption(option5);
        // window.addEventListener("resize", function () {
        //   E5.resize();
        // });
        // 6
        // const option6 = {
        //   xAxis: {
        //     data: this.oilList[5][1],
        //   },
        //   yAxis: {
        //     type: "value",
        //   },
        //   legend: {
        //     data: ["进油口(℃)"],
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //     axisPointer: {
        //       type: "cross",
        //       label: {
        //         backgroundColor: "#6a7985",
        //       },
        //     },
        //   },
        //   series: [
        //     {
        //       name: "进油口(℃)",
        //       data: this.oilList[5][0],
        //       type: "line",
        //       markPoint: {
        //         data: [
        //           { type: "max", name: "Max" },
        //           { type: "min", name: "Min" },
        //         ],
        //       },
        //       markLine: {
        //         data: [{ type: "average", name: "Avg" }],
        //       },
        //     },
        //   ],
        // };
        // const E6 = echarts.init(this.$refs.ec);
        // E6.setOption(option6);
        // window.addEventListener("resize", function () {
        //   E6.resize();
        // });
        // const option7 = {
        //   xAxis: {
        //     data: this.oilList[6][1],
        //   },
        //   yAxis: {
        //     type: "value",
        //   },
        //   legend: {
        //     data: ["出油口(℃)"],
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //     axisPointer: {
        //       type: "cross",
        //       label: {
        //         backgroundColor: "#6a7985",
        //       },
        //     },
        //   },
        //   series: [
        //     {
        //       name: "出油口(℃)",
        //       data: this.oilList[6][0],
        //       type: "line",
        //       markPoint: {
        //         data: [
        //           { type: "max", name: "Max" },
        //           { type: "min", name: "Min" },
        //         ],
        //       },
        //       markLine: {
        //         data: [{ type: "average", name: "Avg" }],
        //       },
        //     },
        //   ],
        // };
        // const E7 = echarts.init(this.$refs.e);
        // E7.setOption(option7);
        // window.addEventListener("resize", function () {
        //   E7.resize();
        // });
      });
    },
    // 二号蜡池
    getOilListTwo() {
      this.loading = true;
      oillinetow(this.myTime).then((res) => {
        this.oilList = res.data;
          const option2 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["二号蜡池(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "二号蜡池(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E2 = echarts.init(this.$refs.echart);
        E2.setOption(option2);
        window.addEventListener("resize", function () {
          E2.resize();
        });
      })
    },
    // 三号蜡池
    getOilListthree() {
      this.loading = true;
      oillinethree(this.myTime).then((res) => {
        this.oilList = res.data;
          const option3 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["三号蜡池(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "三号蜡池(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E3 = echarts.init(this.$refs.echar);
        E3.setOption(option3);
        window.addEventListener("resize", function () {
          E3.resize();
        });
      })
    },
    // 四号蜡池
    getOilListfour() {
      this.loading = true;
      oillinefour(this.myTime).then((res) => {
        this.oilList = res.data;
          const option4 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["四号蜡池(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "四号蜡池(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E4 = echarts.init(this.$refs.echa);
        E4.setOption(option4);
        window.addEventListener("resize", function () {
          E4.resize();
        });
      })
    },
    // 五号蜡池
    getOilListfive() {
      this.loading = true;
      oillinefive(this.myTime).then((res) => {
        this.oilList = res.data;
          const option5 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["五号蜡池(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "五号蜡池(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E5 = echarts.init(this.$refs.ech);
        E5.setOption(option5);
        window.addEventListener("resize", function () {
          E5.resize();
        });
      })
    },
    // 进油口
    getOilListsix() {
      this.loading = true;
      oillinesix(this.myTime).then((res) => {
        this.oilList = res.data;
          const option6 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["进油口(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "进油口(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E6 = echarts.init(this.$refs.ec);
        E6.setOption(option6);
        window.addEventListener("resize", function () {
          E6.resize();
        });
      })
    },
    // 出油口
    getOilListseven() {
      this.loading = true;
      oillineseven(this.myTime).then((res) => {
        this.oilList = res.data;
          const option7 = {
          xAxis: {
            data: this.oilList[1],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["出油口(℃)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "出油口(℃)",
              data: this.oilList[0],
              type: "line",
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
        };
        const E7 = echarts.init(this.$refs.e);
        E7.setOption(option7);
        window.addEventListener("resize", function () {
          E7.resize();
        });
      })
    },
    getsrTemp() {
      srTempAPI(this.myTime).then((res) => {
        const e = echarts.init(this.$refs.srTemp);
        const option = {
          xAxis: {
            type: "category",
            name: "时间",
            data: res.data[1],
          },
          yAxis: {
            type: "value",
            name: "度数（℃)",
          },
          series: [
            {
              type: "line",
              name: "导热油化蜡设备散热片温度曲线（℃）",
              data: res.data[0],
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
          legend: { data: ["导热油化蜡设备散热片温度曲线（℃）"] },

          tooltip: {
            trigger: "axis",
          },
        };
        e.setOption(option);
        window.addEventListener("resize", function () {
          e.resize();
        });
      });
    },
    getdjTempFN() {
      djTempAPI(this.myTime).then((res) => {
        const e = echarts.init(this.$refs.djTemp);
        const option = {
          xAxis: {
            type: "category",
            name: "时间",
            data: res.data[1],
          },
          yAxis: {
            type: "value",
            name: "度数（℃）",
          },
          series: [
            {
              type: "line",
              name: "导热油化蜡油泵电机温度曲线（℃）",
              data: res.data[0],
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              markLine: {
                data: [{ type: "average", name: "Avg" }],
              },
            },
          ],
          legend: { data: ["导热油化蜡油泵电机温度曲线（℃）"] },

          tooltip: {
            trigger: "axis",
          },
        };
        e.setOption(option);
        window.addEventListener("resize", function () {
          e.resize();
        });
      });
    },
    getTypeList() {
      this.loading = true;
      consNow().then((response) => {
        // console.log(response);
        this.tableData = response.data;
        this.loading = false;
      });
    },

    handleQuery() {
      this.getList();
      this.getTypeList();
      this.getOilList();
      this.getOilListTwo();
      this.getOilListthree();
      this.getOilListfour();
      this.getOilListfive();
      this.getOilListsix();
      this.getOilListseven();
      this.getsrTemp();
      this.getdjTempFN();
    },
  },
};
</script>

<style scoped>
h1 {
  color: #0072c6;
  font-size: 25px;
}

h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
/* .app-container {
  background-color: pink;
  margin-left: 160rpx;
  margin-top: 20rpx;
} */

.app-container {
  height: 550px;
}
.app-container-left {
  margin-left: 40px;
}
.down1 {
  margin-right: 10px;
}
.down2 {
  margin-right: 10px;
}
.down3 {
  margin-right: 10px;
}
.down4 {
  margin-right: 10px;
}
.demo-ruleForm{
  display: inline-block;
}
.optionL {
  float: right;
  margin-top: 20px;
  margin-bottom: -5px;
  width: 591px;
  /* background: pink; */
}
.laber >>> .el-form-item__label {
  color: #0072c6;
}
.f1 {
  float: left;
}
.f2 {
  float: left;
}
.down5 {
  float: right;
  margin-top: 20px;
  margin-right: 40px;
}
.clear {
  clear: both;
}
.app-container-left {
  width: 45%;
  height: 500px;
  float: left;
}
.app-container-right {
  width: 45%;
  height: 500px;
  float: right;
  margin-right: 28px;
}
.proCharts {
  width: 100%;
  height: 400px;
}
/* @media screen and (max-width: 1320px) {
  #up {
    overflow: scroll;
  }
} */
.aaa >>> .el-form-item__label {
  white-space: pre-line;
}
</style>
